import { Card, Space, Table, Tag ,Form , Input , Button,Select} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useAppDispatch } from '@/hooks';
import React,{useEffect , useState} from 'react';
import SelectorCom from '@/components/SelectorCom'
import {useSelectorAttrLlist} from '@/store/slices/attr'
import {useSelectorCateGoryList,changeIsShowNumber} from '@/store/slices/category'
interface DataType {
  key: string;
  name: string;
  money: string;
  address: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '序号',
    // dataIndex: 'id',
    render: (text, record,index)=>index+1
  },
  {
    title: '名称属性',
    dataIndex: 'attrName',
    align: 'right',
  },
  {
    title: '属性值列表',
    dataIndex: 'attrValueList',
    render:(attrValueList)=>{
      return(
        <>
          {attrValueList.map((attrValueList:any) => {
            return(
              <Tag color="blue" key={attrValueList.id}>
                {attrValueList.valueName}
              </Tag>
            )
          })}
        </>
      )
      
    }
  },
  {
    title: '操作',
    render:()=>{
      return(
        <>
          <Button>修改</Button>
          <Button>删除</Button>
        </>
      )
    }
  },
];

const columns2: ColumnsType<DataType> = [
  {
    title: '序号',
    // dataIndex: 'id',
    render: (text, record,index)=>index+1
  },
  {
    title: '名称名称',
    dataIndex: 'attrName',
    align: 'right',
  },
  {
    title: '操作',
    render:()=>{
      return(
        <>
          <Button size="small" type="primary" danger >删除</Button>
        </>
      )
    }
  },
];

const App: React.FC = () => {
  const dispatch = useAppDispatch()
  const [attrValue,setAttrValue]=useState([])
  const {category3Id,categoryList} =useSelectorAttrLlist()
  const {isShow} = useSelectorCateGoryList()
  let data : DataType[] = []
  if(category3Id){
    console.log(categoryList)
     data =categoryList.data
  }
  const changeIsShow1=()=>{
      dispatch(changeIsShowNumber(2))
  }
  const attrValueChange=(value:any)=>{
    // console.log(value)
    setAttrValue(value.data)
  }
  const addAttrValue=(e:any)=>{
    console.log(e.target.value)
  }
  useEffect(()=>{
    // dispatch(getCategoryListSync(category1Id,category2Id,category3Id))
  })
	return(
		<div>
      <SelectorCom></SelectorCom>
			<Card style={{display:isShow===1?'block':'none'}}>
				<Button type='primary' onClick={changeIsShow1} disabled={!category3Id} >添加属性</Button>
				<Table
          rowKey="id"
          columns={columns}
          dataSource={data}
          bordered
        />
			</Card>
      <Card style={{display:isShow===2?'block':'none'}}>
        <Input style={{width:200}} size="middle" onChange={attrValueChange} value={attrValue}></Input>
        <br />
        <Button disabled={!!attrValue} style={{marginTop:10 , marginBottom:10}} onClick={addAttrValue}>添加属性值</Button>
        <Table
          rowKey="id"
          columns={columns2}
          dataSource={data}
          bordered
        />
      </Card>
		</div>
	)
};

export default App;